<template>
  <div class="warehouse-container">
    <div class="warehouse-layout" ref="layoutRef">
      <svg
        width="100%"
        height="100%"
        :viewBox="`0 0 400 7000`"
        preserveAspectRatio="xMidYMid meet"
        :style="{
          transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
          transformOrigin: '0 0',
          cursor: isDragging ? 'grabbing' : 'grab'
        }"
        @mousedown="handleMouseDown"
        @mousemove="handleMouseMove"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseUp"
        @wheel.prevent="handleWheel"
        class="warehouse-svg"
      >
        <g :transform="`translate(0, ${-50 * (scale - 1)})`">
          <!-- 使用循环渲染所有存储区域 -->
          <StorageArea
            v-for="area in storageAreas"
            :key="area.id"
            :x="area.x"
            :y="area.y"
            :rows="area.rows"
            :cols="area.cols"
            :cell-width="area.cellWidth"
            :cell-height="area.cellHeight"
            :cell-spacing="area.cellSpacing"
            :direction="area.direction"
            :numbering-pattern="area.numberingPattern"
            :gaps="area.gaps"
            :show-aisle="area.showAisle"
            :aisle-direction="area.aisleDirection"
            :aisle-position="area.aislePosition"
            :area-name="area.areaName"
            :area-name-position="area.areaNamePosition"
            :cell-types="area.cellTypes"
            @cell-hover="handleCellHover"
            @cell-leave="handleCellLeave"
            @cell-click="handleCellClick"
            @area-click="handleLineClick"
          />

          <!-- 使用循环渲染所有空存储区域 -->
          <StorageAreaEmpty
            v-for="area in emptyStorageAreas"
            :key="area.id"
            :x="area.x"
            :y="area.y"
            :rows="area.rows"
            :cols="area.cols"
            :cell-width="area.cellWidth"
            :cell-height="area.cellHeight"
            :cell-spacing="area.cellSpacing"
            :direction="area.direction"
            :numbering-pattern="area.numberingPattern"
            :gaps="area.gaps"
            :show-aisle="area.showAisle"
            :aisle-direction="area.aisleDirection"
            :aisle-position="area.aislePosition"
            :area-name="area.areaName"
            :area-name-position="area.areaNamePosition"
            :cell-types="area.cellTypes"
            @cell-hover="handleCellHover"
            @cell-leave="handleCellLeave"
            @cell-click="handleCellClick"
          />

          <!-- 区域标记 -->
          <AreaMarker
            v-for="marker in areaMarkers"
            :key="marker.id"
            :x="marker.x"
            :y="marker.y"
            :width="marker.width"
            :height="marker.height"
            :title="marker.title"
            :isDashed="marker.isDashed"
            :dashLength="marker.dashLength"
            :borderRadius="marker.borderRadius"
            :dashGap="marker.dashGap"
            :titlePosition="marker.titlePosition"
            :titleSize="marker.titleSize"
          />
        </g>
      </svg>

      <!-- 产线正面图弹窗 -->
      <div v-if="selectedLine" class="production-line-modal">
        <div class="production-line-content">
          <div class="production-line-header">
            <h4>{{selectedLine.name}}</h4>
            <button class="close-button" @click="selectedLine = null">&times;</button>
          </div>
          <svg width="100%" height="400" :viewBox="`0 0 ${selectedLine.shelves.length * 220} 400`">
            <ProductionLineFrontView
              :x="20"
              :y="40"
              :line-name="selectedLine.name"
              :shelves="selectedLine.shelves"
            />
          </svg>
        </div>
      </div>

      <!-- 正面图弹窗 -->
      <div v-if="selectedCell" class="shelf-front-view-container">
        <div class="shelf-front-view-content">
          <div class="shelf-front-view-header">
            <h4>{{ selectedCell?.area }} -- {{selectedCell?.number}}</h4>
            <button class="close-button" @click="selectedCell = null">&times;</button>
          </div>
          <svg width="300" height="400" viewBox="0 0 300 400">
            <ShelfFrontView
              :x="50"
              :y="40"
              :layer-status="[groundFloor>0?'occupied':'empty',SecondFloor>0?'occupied':'empty', threeLayers>0?'occupied':'empty']"
              :layer-numbers="[groundFloor, SecondFloor, threeLayers]"
            />
          </svg>
        </div>
      </div>

      <!-- 悬浮提示框 -->
      <div
        v-if="hoveredCell"
        class="cell-popover"
        :style="{
          left: popoverPosition.x + 'px',
          top: popoverPosition.y + 'px',
        }"
      >
        <div class="popover-header">
          <div class="header-icon">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
              <path d="M4 4h16v16H4V4z" stroke="currentColor" stroke-width="2"/>
              <path d="M9 12h6M12 9v6" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
            </svg>
          </div>
          <h4 class="popover-title">库位信息</h4>
        </div>
        <div class="popover-content">
          <div class="info-row">
            <span class="info-label">编号</span>
            <span class="info-value">{{ hoveredCell.number }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">状态</span>
            <span class="info-value" :class="{ 'status-occupied': hoveredCell.status === 'occupied' }">
              <span class="status-dot"></span>
              {{ hoveredCell.status === 'occupied' ? '已占用' : '空闲' }}
            </span>
          </div>
          <div class="info-row">
            <span class="info-label">当前数量</span>
            <span class="info-value">{{ hoveredCell.currQty }}</span>
          </div>
          <div class="info-row">
            <span class="info-label">产线</span>
            <span class="info-value">{{ hoveredCell.area }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import StorageArea from './components/StorageArea.vue'
import ShelfFrontView from './components/ShelfFrontView.vue'
import StorageAreaEmpty from './components/StorageAreaEmpty.vue'
import ProductionLineFrontView from './components/ProductionLineFrontView.vue'
import AreaMarker from './components/AreaMarker.vue'
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { getRestAreaData } from '/@/api/warehouseApi'
import throttle from 'lodash/throttle'

interface StorageCell {
  id: string
  number: number
  currQty: number
  status: 'empty' | 'occupied'
  type: string
  area: string
  x: number
  y: number
}

interface ProductionLine {
  name: string
  shelves: {
    layerStatus: ('empty' | 'occupied')[]
    layerNumbers: number[]
  }[]
}
// 存储区域配置
const storageAreas = ref([
  // LVT养生区 - 横向库位
  {
    id: 'LVTRT12',
    x: 280, y: 1320, rows: 1, cols: 22, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT12', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT11',
    x: 280, y: 1520, rows: 1, cols: 19, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 8, width: 64 }, { position: 18, width: 138 }],
    numberingPattern: [[19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT11', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT10',
    x: 280, y: 1610, rows: 1, cols: 22, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT10', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT09',
    x: 280, y: 1810, rows: 1, cols: 22, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT09', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT08',
    x: 250, y: 1900, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT08', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT07',
    x: 250, y: 2100, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT07', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT06',
    x: 250, y: 2190, rows: 1, cols: 23, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 9, width: 120 }],
    numberingPattern: [[23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT06', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT05',
    x: 250, y: 2390, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT05', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT04',
    x: 250, y: 2470, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT04', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT03',
    x: 250, y: 2670, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT03', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT02',
    x: 250, y: 2870, rows: 1, cols: 21, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 9, width: 120 }, { position: 19, width: 120 }],
    numberingPattern: [[21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT02', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LVTRT01',
    x: 250, y: 2950, rows: 1, cols: 25, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LVTRT01', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT20',
    x: 250, y: 3150, rows: 1, cols: 21, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16,17,18,19,20,21]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT20', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'LMHHTR01',
    x: -3000, y: 3800, rows: 1, cols: 46, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[46,45,44,43,42,41,40,39,38,37,36,35,34,33,32,31,30,29,28,27,26,25,24,23,22,21,20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'LMHHTR01', areaNamePosition: 'top' as const, cellTypes: ['wip']
  },
  // TH养生区 - 垂直产线
  {
    id: 'THRTO1',
    x: 50, y: 4185, rows: 8, cols: 1, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRTO1', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT02',
    x: 130, y: 4050, rows: 10, cols: 1, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT02', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT03',
    x: 280, y: 4050, rows: 10, cols: 1, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT03', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT04',
    x: 360, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT04', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT05',
    x: 510, y: 4120, rows: 10, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT05', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT06',
    x: 587, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT06', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT07',
    x: 737, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT07', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT08',
    x: 807, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT08', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT09',
    x: 957, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT09', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT010',
    x: 1107, y: 4120, rows: 10, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT010', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT011',
    x: 1180, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT011', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT012',
    x: 1330, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT012', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'THRT013',
    x: 1405, y: 4060, rows: 11, cols: 1, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'vertical' as const,
    numberingPattern: [[11], [10], [9], [8], [7], [6], [5], [4], [3], [2], [1]],
    showAisle: true, aisleDirection: 'vertical' as const, aislePosition: 100,
    areaName: 'THRT013', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  // JC养生区 - 右侧横向库位
  {
    id: 'JCRT19',
    x: 1780, y: 3400, rows: 1, cols: 13, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT19', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT18',
    x: 1770, y: 3560, rows: 1, cols: 12, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 10, width: 68 }],
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT18', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT17',
    x: 1700, y: 3640, rows: 1, cols: 14, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT17', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT16',
    x: 1700, y: 3800, rows: 1, cols: 14, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT16', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT15',
    x: 1700, y: 3880, rows: 1, cols: 14, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT15', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT14',
    x: 1770, y: 4050, rows: 1, cols: 12, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 10, width: 68 }],
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8,9, 10,11,12]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT14', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT13',
    x: 1700, y: 4130, rows: 1, cols: 16, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT13', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT12',
    x: 1700, y: 4300, rows: 1, cols: 16, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT12', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT11',
    x: 1700, y: 4375, rows: 1, cols: 16, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14,15,16]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT11', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT10',
    x: 1850, y: 4900, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT10', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT09',
    x: 1850, y: 4980, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT09', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT08',
    x: 1850, y: 5150, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT08', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT07',
    x: 1850, y: 5230, rows: 1, cols: 13, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT07', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT06',
    x: 1850, y: 5400, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT06', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT05',
    x: 1850, y: 5480, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT05', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT04',
    x: 1850, y: 5670, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT04', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT03',
    x: 1850, y: 5750, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT03', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT02',
    x: 1850, y: 5940, rows: 1, cols: 13, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 10, width: 60 }],
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT02', areaNamePosition: 'right' as const, cellTypes: ['wip']
  },
  {
    id: 'JCRT01',
    x: 1850, y: 6010, rows: 1, cols: 14, cellWidth: 53, cellHeight: 53, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12,13,14]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: 'JCRT01', areaNamePosition: 'right' as const, cellTypes: ['wip']
  }
])

// 空存储区域配置
const emptyStorageAreas = ref([
  {
    id: 'empty-area-1',
    x: 1750, y: 4575, rows: 1, cols: 14, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    numberingPattern: [[14, 13, 12, 11, 10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaName: '空托盘区域', areaNamePosition: 'bottom' as const, cellTypes: ['wip']
  },
  {
    id: 'empty-area-2',
    x: 1750, y: 4710, rows: 1, cols: 13, cellWidth: 60, cellHeight: 60, cellSpacing: 8,
    direction: 'horizontal' as const,
    gaps: [{ position: 11, width: 68 }],
    numberingPattern: [[13, 12, 11, 10,9,8,7,6,5,4,3,2,1]],
    showAisle: true, aisleDirection: 'horizontal' as const, aislePosition: 100,
    areaNamePosition: 'top' as const, cellTypes: ['wip']
  }
])

// 区域标记配置
const areaMarkers = ref([
  {
    id: 'lvt-area',
    x: 100, y: 1200, width: 1900, height: 2100,
    title: 'LVT养生区', isDashed: true, dashLength: 8, borderRadius: 40, dashGap: 8,
    titlePosition: 'right' as const, titleSize: 34
  },
  {
    id: 'th-area',
    x: -10, y: 3950, width: 1550, height: 950,
    title: 'TH养生区', isDashed: true, dashLength: 8, borderRadius: 40, dashGap: 8,
    titlePosition: 'bottom' as const, titleSize: 34
  },
  {
    id: 'jc-area',
    x: 1600, y: 3350, width: 1350, height: 2800,
    title: 'JC养生区', isDashed: true, dashLength: 8, borderRadius: 40, dashGap: 8,
    titlePosition: 'right' as const, titleSize: 34
  },
  {
    id: 'lmhh-area',
    x: -3050, y: 3700, width: 3350, height: 220,
    title: 'LMHH养生区', isDashed: true, dashLength: 8, borderRadius: 40, dashGap: 8,
    titlePosition: 'right' as const, titleSize: 34
  }
])

const list = ref()
const sumCurrQty = ref()

const getLine = (cell) =>{
  const group = list.value.filter(item => item.locationCode.includes(cell));
  return group
}
const getLineItem = (cell) =>{
  const group = list.value.filter(item => item.locationCode.includes(cell.area));
  let num =  cell.number > 10 ? cell.number:`0${cell.number}`
  const group2 = group.filter(item => item.locationCode.slice(-2) == num);
  return group2
}
//计算产线库位总数
const lineTotal = () => {
  // 先将locationCode 最后两位数一样的组成一个数组
  const group = list.value.reduce((acc, item) => {
    const key = item.locationCode.slice(-2)
    if (!acc[key]) {
      acc[key] = []
    }
    acc[key].push(item)
    return acc
  }, {})
  //计算group中 每一项的currQty 总和 作为key
  const total = Object.keys(group).reduce((acc, key) => {
    const sum = group[key].reduce((acc, item) => acc + Number(item.currQty), 0)
    acc[key] = sum
    return acc
  }, {})
  sumCurrQty.value = total
}

// 布局配置
const layoutHeight = 800

// 缩放配置
const scale = ref(1)
const minScale = 1
const maxScale = 10

// 拖拽相关状态
const isDragging = ref(false)
const position = ref({ x: 0, y: 0 })
const dragStart = ref({ x: 0, y: 0 })
const lastPosition = ref({ x: 0, y: 0 })

// 鼠标位置
const mousePosition = ref({ x: 0, y: 0 })
const layoutRef = ref<HTMLElement | null>(null)

// 当前悬浮的库位
const hoveredCell = ref<StorageCell | null>(null)

// 当前选中的库位
const selectedCell = ref<StorageCell | null>(null)

const groundFloor = ref()
const SecondFloor = ref()
const threeLayers = ref()

// 当前选中的产线
const selectedLine = ref<ProductionLine | null>(null)

// 悬浮框位置计算
const popoverPosition = computed(() => {
  if (!hoveredCell.value) return { x: 0, y: 0 }
  if (!layoutRef.value) return { x: 0, y: 0 }
  
  const rect = layoutRef.value.getBoundingClientRect()
  return {
    x: mousePosition.value.x * scale.value + position.value.x + 10,
    y: mousePosition.value.y * scale.value + position.value.y + 10
  }
})

// 事件处理
const handleMouseDown = (event: MouseEvent) => {
  isDragging.value = true
  dragStart.value = {
    x: event.clientX - position.value.x,
    y: event.clientY - position.value.y
  }
  lastPosition.value = { ...position.value }
}

const handleMouseUp = () => {
  isDragging.value = false
}

const _handleMouseMove = (event: MouseEvent) => {
  if (!layoutRef.value) return
  // 更新鼠标位置（用于悬浮提示）
  const rect = layoutRef.value.getBoundingClientRect()
  mousePosition.value = {
    x: (event.clientX - rect.left - position.value.x) / scale.value,
    y: (event.clientY - rect.top - position.value.y) / scale.value
  }
  // 处理拖拽
  if (isDragging.value) {
    position.value = {
      x: event.clientX - dragStart.value.x,
      y: event.clientY - dragStart.value.y
    }
  }
}

// 使用 throttle 包装，限制每 16ms（约 60fps）最多执行一次
const handleMouseMove = throttle(_handleMouseMove, 16)

// 原始 handleWheel 逻辑封装为 _handleWheel
const _handleWheel = (event: WheelEvent) => {
  event.preventDefault()
  // 计算缩放比例变化
  const delta = event.deltaY > 0 ? -0.2 : 0.2
  const newScale = Math.max(minScale, Math.min(maxScale, scale.value + delta))
  
  if (!layoutRef.value) return
  
  // 获取容器的位置和尺寸信息
  const rect = layoutRef.value.getBoundingClientRect()
  
  // 计算鼠标相对于容器的位置
  const mouseX = event.clientX - rect.left
  const mouseY = event.clientY - rect.top
  
  // 计算鼠标在SVG坐标系中的位置（考虑当前缩放和偏移）
  const mouseInSvgX = (mouseX - position.value.x) / scale.value
  const mouseInSvgY = (mouseY - position.value.y) / scale.value
  
  // 计算缩放前后的位置差异
  const scaleFactor = newScale / scale.value
  
  // 更新缩放值
  scale.value = newScale
  
  // 调整位置，使鼠标指向的点保持不变
  position.value = {
    x: mouseX - mouseInSvgX * newScale,
    y: mouseY - mouseInSvgY * newScale
  }
}

// 使用 throttle 包装，限制每 16ms（约 60fps）最多执行一次
const handleWheel = throttle(_handleWheel, 16)

const handleCellHover = (cell: StorageCell) => {

  let itemList =  getLineItem(cell)
   const totalQty = itemList.reduce((accumulator, item) => {
    return accumulator + item.currQty;
  }, 0);
   cell.currQty = totalQty
  hoveredCell.value = cell

}

const handleCellLeave = () => {
  hoveredCell.value = null
}

const handleCellClick = (cell: StorageCell) => {

let itemList =  getLineItem(cell)
  selectedCell.value = cell
  groundFloor.value = itemList
      .filter(item => item.locationCode.slice(-3, -2) == '1')
      .reduce((accumulator, item) => accumulator + item.currQty, 0);
  SecondFloor.value = itemList
      .filter(item => item.locationCode.slice(-3, -2) == '2')
      ?.reduce((accumulator, item) => accumulator + item.currQty, 0);
  threeLayers.value = itemList
      .filter(item => item.locationCode.slice(-3, -2) == '3')
      .reduce((accumulator, item) => accumulator + item.currQty, 0);
  hoveredCell.value = cell
}

// 禁用页面滚动
const disableScroll = (event: WheelEvent) => {
  event.preventDefault()
}

// 组件挂载时添加事件监听
onMounted(() => {
  document.addEventListener('wheel', disableScroll, { passive: false })
  getLineData()

})

// 组件卸载时移除事件监听
onUnmounted(() => {
  document.removeEventListener('wheel', disableScroll)
})

//获取产线数据
const getLineData = async () =>{
  try {
    const res = await getRestAreaData({
      processCode: "",
      lineCode: "",
      locationCode: ""
    })
    list.value  =  res.result
  }catch (e) {
    console.log(e)
  }
}

// 处理产线点击
const handleLineClick = (lineName: string, cells: StorageCell[]) => {

 let list =  getLine(lineName)

  selectedLine.value = {
    name: lineName,
    shelves: cells.map(cell => {
      // 查找 list 中与 cell.number 对应的 locationCode
      let num =  cell.number > 10 ? cell.number:`0${cell.number}`
      // const matchingItem = list.find(item => item.locationCode === cell.number);
      const matchingItem = list.filter(item => item.locationCode.slice(-2) == num)
      // 如果找到对应项，取 currQty，否则设为 0
      let groundFloor = matchingItem
          .filter(item => item.locationCode.slice(-3, -2) == '1')
          .reduce((accumulator, item) => accumulator + item.currQty, 0);
      let SecondFloor = matchingItem
          .filter(item => item.locationCode.slice(-3, -2) == '2')
          ?.reduce((accumulator, item) => accumulator + item.currQty, 0);
      let threeLayers = matchingItem
          .filter(item => item.locationCode.slice(-3, -2) == '3')
          .reduce((accumulator, item) => accumulator + item.currQty, 0);
      const quantity = matchingItem ? matchingItem.currQty : 0;

      return {
        layerStatus: [groundFloor>0?'occupied':'empty', SecondFloor>0?'occupied':'empty', threeLayers>0?'occupied':'empty'],
        layerNumbers: [groundFloor, SecondFloor, threeLayers],
        quantity: quantity  // 添加数量到每个 shelf
      };
    })
  }
}
</script>

<style scoped>
.warehouse-container {
  padding: 20px;
  background: #f5f5f5;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.warehouse-layout {
  position: relative;
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.warehouse-svg {
  background: white;
  transition: none;
  max-width: 100%;
  max-height: 100%;
  user-select: none;
}

.warehouse-svg * {
  user-select: none;
}

.cell-popover {
  position: absolute;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 12px;
  padding: 0;
  min-width: 260px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  z-index: 100;
  pointer-events: none;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  animation: fadeIn 0.2s ease-in-out;
  overflow: hidden;
}

.popover-header {
  background: #f8f9fa;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #e9ecef;
  border-radius: 8px;
  color: #495057;
}

.popover-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}

.popover-content {
  padding: 16px;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-size: 13px;
  color: #6c757d;
  font-weight: 500;
}

.info-value {
  font-size: 13px;
  color: #495057;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #40c057;
}

.status-occupied .status-dot {
  background: #fa5252;
}

.status-occupied {
  color: #e03131;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.shelf-front-view-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.shelf-front-view-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 360px;
}

.shelf-front-view-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.shelf-front-view-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.close-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.close-button:hover {
  background: #f5f5f5;
}

.production-line-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

.production-line-content {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  min-width: 80%;
  max-width: 95%;
  max-height: 90vh;
  overflow: auto;
}

.production-line-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.production-line-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
</style>
